<template>
  <div class="bottom-normal vux-1px-t">
    <flexbox :gutter="0" class="">
      <flexboxItem>
        <a @click="turndownClick" :class="{ 'active': turndownShow }">驳回</a>
      </flexboxItem>
      <flexboxItem>
        <a class="vux-1px-l" @click="passClick">通过</a>
      </flexboxItem>
    </flexbox>
    <div v-transfer-dom>
      <confirm v-model="turndownShow" @on-confirm="turndownSubmit"
        class="turndown-confirm type-text" title="驳回原因" confirm-text="确认">
        <x-textarea v-model="turndownText" placeholder="请输入驳回原因（必填）" :max="200" class="textarea"></x-textarea>
      </confirm>
    </div>
    <div v-transfer-dom>
      <confirm v-model="passShow" @on-confirm="passSubmit"
              class="turndown-confirm type-text" title="通过备注" confirm-text="确认">
        <x-textarea v-model="passText" placeholder="请输入通过备注（非必填）" :max="200" class="textarea"></x-textarea>
      </confirm>
    </div>
    <!-- 提示彈窗 -->
    <div v-transfer-dom>
      <confirm v-model="requiredShow"
        class="turndown-confirm" title="提示" confirm-text="确认" :show-cancel-button="false" @on-confirm="turndownShow = true">
        <p>请输入驳回原因</p>
      </confirm>
    </div>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem, Confirm, XTextarea, TransferDom, Loading } from 'vux';
  import qs from 'qs';
  export default {
    name: 'BottomApproval',
    data () {
      return {
        // 駁回
        turndownShow: false,
        turndownText: '',
        // 通過
        passShow: false,
        passText: '',
        requiredShow: false
      };
    },
    components: {
      Loading,
      Flexbox,
      FlexboxItem,
      Confirm,
      XTextarea
    },
    directives: {
      TransferDom
    },
    mounted () {
    },
    methods: {
      turndownClick: function () {
        if (this.turndownShow) {
          this.turndownShow = false;
        } else {
          this.turndownText = '';
          this.turndownShow = true;
        }
      },
      passClick: function () {
        if (this.passShow) {
          this.passShow = false;
        } else {
          this.passText = '';
          this.passShow = true;
        }
      },
      passSubmit: function () {
        let detailInfo = JSON.parse(this.$route.query.item);
        let postData = {
          data: {
            KeyId: detailInfo.KeyId,
            StaffNo: this.getUserInfo().StaffNo,
            CreatedStaffNo: detailInfo.CreatedStaffNo,
            Remark: this.passText
          }
        };
        this.$parent.loadingShow = true;
        this.axios.post('/Process/Pass', qs.stringify(postData))
        .then((res) => {
          this.$parent.loadingShow = false;
          if (res.data.IsSuccess) {
            this.$parent.getItemDetail();
            this.$parent.processShow = true;
            this.$parent.bottomApprovalShow = false;
            this.$parent.resStatusText = '审批通过成功';
            this.$parent.resStatusShow = true;
          } else {
            this.$parent.toastShow = true;
            this.$parent.toastText = `审批通过失败，错误信息：${res.data.ExMessage}`;
          }
        })
        .catch((err) => {
          this.$parent.loadingShow = false;
          this.$parent.toastShow = true;
          this.$parent.toastText = `审批通过失败，错误信息：${err}`;
        });
      },
      turndownSubmit: function () {
        if (this.isTurndownTextNull()) {
          this.requiredShow = true;
          return false;
        }
        let postData = {
          data: {
            KeyId: JSON.parse(this.$route.query.item).KeyId,
            StaffNo: this.getUserInfo().StaffNo,
            TurndownRemark: this.turndownText
          }
        };
        this.$parent.loadingShow = true;
        this.axios.post('/Process/Cancel', qs.stringify(postData))
        .then((res) => {
          this.$parent.loadingShow = false;
          console.log('驳回', res);
          if (res.data.IsSuccess) {
            this.$parent.getItemDetail();
            this.$parent.processShow = true;
            this.$parent.bottomApprovalShow = false;
            this.$parent.resStatusText = '审批驳回成功';
            this.$parent.resStatusShow = true;
          } else {
            this.$parent.toastShow = true;
            this.$parent.toastText = `审批通过失败，错误信息：${res.data.ExMessage}`;
          }
        })
        .catch((err) => {
          this.$parent.loadingShow = false;
          this.$parent.toastShow = true;
          this.$parent.toastText = `审批通过失败，错误信息：${err}`;
        });
      },
      isTurndownTextNull: function () {
        if (this.turndownText === '') {
          return true;
        }
        return false;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .bottom-normal{
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    &:before{
      top: -.5px;
      border-color: #ccc;
    }
    a{
      display: block;
      position: relative;
      font-size: getRem(32);
      line-height: getRem(98);
      background: #fff;
      text-align: center;
      &.active{
        color: #fff;
        background-image: linear-gradient(194deg,
          #fa5864 0%,
          #fc476d 100%),
        linear-gradient(
          #ffffff,
          #ffffff);
        background-blend-mode: normal,
          normal;
      }
    }
    .vux-1px-l{
      &:before{
        border-color: #ccc;
      }
    }
  }
</style>
